<html>
  <head>

        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
        </script>
        
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=sk"></script>        
        
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"/>
    
    <script language="javascript">
    
    dojo.require("dijit.layout.AccordionContainer");
    dojo.require("dijit.layout.ContentPane");
    dojo.require("dijit.TitlePane");
    
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;
      var stepDisplay;
      var mypath;
      
      var connContainer;
      
      var gmarkers = [];
      
      var directionsRenderers = [];
      
	  var isToStopPanelOpen = true;
	  var isFromStopPanelOpen = true;
      
      var infowindow = new google.maps.InfoWindow({size: new google.maps.Size(150,50)});
      
      
      var routeResponse;
      var loc_a;
      var loc_b;
            
      var toStopNodes = [];
      var routesNodes = [];
      var fromStopNodes = [];
      var routeStops = [];
      
      var curConnNode;
      var curConnNodeIdx = -1;
      
            
      dojo.addOnLoad(function() {
        connContainer = new dijit.layout.AccordionContainer({
            style: "height: 600px;overflow:auto;",
            onClick: function()
        	{
        		selectedNode = this.selectedChildWidget.containerNode;
        		if (selectedNode != curConnNode)
        		{        			
        			clearMap(curConnNodeIdx);
        			
        			curConnNode = selectedNode;
        			curConnNodeIdx = this.getIndexOfChild(this.selectedChildWidget);
        			
        			showContent(curConnNode, curConnNodeIdx);        			
        		}
        	}
        },
        "markup"
        );
		connContainer.startup();
	  });
	  
	  
	function showContent(containerNode, idx)
	{	
		var toStopPane;
		var routeNode;
		var fromStopNode;
						
		//if (containerNode.children.length == 0)
		if (containerNode.childNodes.length == 0)
		{
			toStopPane = createToStopPane(idx);
			toStopNodes[toStopPane.id] = {pane: toStopPane, dirRenderer: null, startMarker: null, stopMarker: null, collapsed: false, id: idx};			
			containerNode.appendChild(toStopPane.domNode);			
			renderToStopPane(toStopPane, idx);
			
			routesPane = createRoutesPane(idx);
			routesNodes[routesPane.id] = {pane: routesPane, startMarker: null, stopMarker: null, routes:[], collapsed: false, id: idx};
			containerNode.appendChild(routesPane.domNode);
			renderRoutesPane(containerNode, routesPane, idx);

			fromStopPane = createFromStopPane(idx);
			fromStopNodes[fromStopPane.id] = {pane: fromStopPane, dirRenderer: null, startMarker: null, stopMarker: null, collapsed: false, id: idx};			
			containerNode.appendChild(fromStopPane.domNode);
			renderFromStopPane(fromStopPane, idx);
			    			    								
		}
		else
		{
			for (var i in toStopNodes) 	
			{
				if (toStopNodes[i].id == idx && !toStopNodes[i].collapsed)
				{
					renderToStopPane(toStopNodes[i].pane, idx);
				} 
			}

            for (var i in routesNodes)  
            {
                if (routesNodes[i].id == idx && !routesNodes[i].collapsed)
                {
                    renderRoutesPane(containerNode, routesNodes[i].pane, idx);
                } 
            }

			for (var i in fromStopNodes) 	
			{
				if (fromStopNodes[i].id == idx && !fromStopNodes[i].collapsed)
				{
					renderFromStopPane(fromStopNodes[i].pane, idx);
				} 
			}
		}		
	}
	
	function clearMap(idx)
	{
	
		for (var i in toStopNodes) 	
		{
			if (toStopNodes[i].id == idx)
			{
				toStopNodes[i].dirRenderer.setMap(null);
				toStopNodes[i].startMarker.setMap(null);
				toStopNodes[i].endMarker.setMap(null);					
			}
		}

		for (var i in fromStopNodes)
		{
			if (fromStopNodes[i].id == idx)
			{
				fromStopNodes[i].dirRenderer.setMap(null);
				fromStopNodes[i].startMarker.setMap(null);
				fromStopNodes[i].endMarker.setMap(null);					
			}
		}
		
		for (var i in routesNodes) 	
		{
		    if (routesNodes[i].id == idx)
		    {
		        hideRoutes(routesNodes[i].pane);
		    }
		}
	}
	
	function hideRoutes(pane)
	{
        for (var i in routesNodes)  
        {
            if (routesNodes[i].pane.id == pane.id)
            {
                for (var j = 0; j < routesNodes[i].routes.length; j++)
                {
                    routesNodes[i].routes[j].start.setMap(null);
                    routesNodes[i].routes[j].end.setMap(null);
                    routesNodes[i].routes[j].path.setMap(null);
                    
                    
                    for (var k = 0; k < routesNodes[i].routes[j].waypts.length; k++)
                    {
                        routesNodes[i].routes[j].waypts[k].setMap(null);
                    }
                    
                    for (var k = 0; k < routesNodes[i].routes[k].dirRenderers.length; i++)
                    {
                        routesNodes[i].routes[j].dirRenderers[k].setMap(null);
                    }                   
                }                   
            }
        }
    }	
	
    function showRoutes(pane)
    {
        for (var i in routesNodes)  
        {
            if (routesNodes[i].pane.id == pane.id)
            {
                for (var j = 0; j < routesNodes[i].routes.length; j++)
                {
                    routesNodes[i].routes[j].start.setMap(map);
                    routesNodes[i].routes[j].end.setMap(map);
                    routesNodes[i].routes[j].path.setMap(map);
                    
                    if (routesNodes[i].routes[j].stopsPane.open)
                    {
	                    for (var k = 0; k < routesNodes[i].routes[j].waypts.length; k++)
	                    {
	                        routesNodes[i].routes[j].waypts[k].setMap(map);
	                    }
	                }
                    
                    for (var k = 0; k < routesNodes[i].routes[k].dirRenderers.length; i++)
                    {
                        routesNodes[i].routes[j].dirRenderers[k].setMap(map);
                    }                   
                }                   
            }
        }
    }   



	
	function createToStopPane(idx)
	{
		var toStopPane = new dijit.TitlePane({
    		title: "Cesta k zástavke",
    		content: "Hľadám cestu...",
    		onClick: function() 
    		{
				if (this.open)
				{
					if (toStopNodes[this.id].dirRenderer)
					{
						toStopNodes[this.id].dirRenderer.setMap(map);
					}
					
					if (toStopNodes[this.id].startMarker)
					{
						toStopNodes[this.id].startMarker.setMap(map);
					}
					
					if (toStopNodes[this.id].endMarker)
					{
						toStopNodes[this.id].endMarker.setMap(map);
					}
					
					toStopNodes[this.id].collapsed = false;
				}
				else
				{																		 
					if (toStopNodes[this.id].dirRenderer)
					{
						toStopNodes[this.id].dirRenderer.setMap(null);
					}
					
					if (toStopNodes[this.id].startMarker)
					{
						toStopNodes[this.id].startMarker.setMap(null);
					}
					
					if (toStopNodes[this.id].endMarker)
					{
						toStopNodes[this.id].endMarker.setMap(null);
					}
					
					toStopNodes[this.id].collapsed = true;
				}
    		}
		});
		
		return toStopPane;
	}
	
	
	function createRoutesPane(idx)
	{
		var routesPane = new dijit.TitlePane({
			title: "Cesta MHD",
			content: routeResponse.route_conns[idx].body,
			onClick: function()
			{
			    var idx;
			    for (var i in routesNodes)
			    {      
			        if (routesNodes[i].pane.id == this.id)
			        {
			             idx = routesNodes[i].id;
			             break;
			        } 
			    }

				if (this.open)
				{
					for (var i in toStopNodes) 	
					{
						if (toStopNodes[i].id == idx && toStopNodes[i].collapsed)
						{							 
							toStopNodes[i].endMarker.setMap(map);
						}
					}

					for (var i in fromStopNodes) 	
					{
						if (fromStopNodes[i].id == idx && fromStopNodes[i].collapsed)
						{							 
							fromStopPanes[i].startMarker.setMap(map);
						}
					}
					
                    showRoutes(this);										             				
				}
				else
				{
					for (var i in toStopNodes) 	
					{
						if (toStopNodes[i].id == idx && toStopNodes[i].collapsed)
						{							 
							toStopNodes[i].endMarker.setMap(null);
						}
					}

					for (var i in fromStopNodes) 	
					{
						if (fromStopNodes[i].id == idx && fromStopNodes[i].collapsed)
						{							 
							fromStopNodes[i].startMarker.setMap(null);
						}
					}
					
					hideRoutes(this);
				}
			} 
		}); 
		
		return routesPane;
	}	


	function createFromStopPane(idx)
	{
		var fromStopPane = new dijit.TitlePane({
    		title: "Cesta od zastávky",
    		content: "Hľadám cestu...",
    		onClick: function() 
    		{
				if (this.open)
				{
					if (fromStopNodes[this.id].dirRenderer)
					{
						fromStopNodes[this.id].dirRenderer.setMap(map);
					}
					
					if (fromStopNodes[this.id].startMarker)
					{
						fromStopNodes[this.id].startMarker.setMap(map);
					}
					
					if (fromStopNodes[this.id].endMarker)
					{
						fromStopNodes[this.id].endMarker.setMap(map);
					}
					
					fromStopNodes[this.id].collapsed = false;
				}
				else
				{																		 
					if (fromStopNodes[this.id].dirRenderer)
					{
						fromStopNodes[this.id].dirRenderer.setMap(null);
					}
					
					if (fromStopNodes[this.id].startMarker)
					{
						fromStopNodes[this.id].startMarker.setMap(null);
					}
					
					if (fromStopNodes[this.id].endMarker)
					{
						fromStopNodes[this.id].endMarker.setMap(null);
					}
					
					fromStopNodes[this.id].collapsed = true;
				}
    		}
		});
		
		return fromStopPane;
	}


	

	function renderToStopPane(pane, i)
	{
		// direction to stop
						
		var request = {
			origin:new google.maps.LatLng(loc_a.lat, loc_a.lng), 
			destination:new google.maps.LatLng(routeResponse.route_conns[i].first_stop.lat, routeResponse.route_conns[i].first_stop.lng),
			travelMode: google.maps.DirectionsTravelMode.WALKING
		};
	
    	var toStopDirRend = new google.maps.DirectionsRenderer({suppressMarkers: true, 
    				polylineOptions: {strokeColor:"#008000", strokeOpacity: 0.7, strokeWeight:"8"}});
    				
    	toStopNodes[pane.id].dirRenderer = toStopDirRend; 
    										 	                					                					                	 	                	               
		directionsService.route(request, function(directionResult, status) {
			if (status == google.maps.DirectionsStatus.OK) 
			{         							           							   		      							      											        						
				toStopDirRend.setMap(map);        						
				toStopDirRend.setDirections(directionResult);
				
				var route = directionResult.routes[0].legs[0];        						            							      										
				      							
				var startMarker = new google.maps.Marker({
					position: route.start_location,
					map: map,
					icon: 'media/images/blackA.png'   							
				});
								      							      					      							      							      							      							      							      															
				google.maps.event.addListener(startMarker, 'click', function() {					
					infowindow.setContent(route.start_address); 
					infowindow.open(map, startMarker);					
				});
				
				gmarkers[route.start_location.toString()] = startMarker;
				toStopNodes[pane.id].startMarker = startMarker;
				      							
				var endMarker = new google.maps.Marker({
					position: route.end_location,
					map: map,
					icon: 'media/images/' + routeResponse.route_conns[i].routes[0].icon							
				});
				      							      							      							      							
				// REVISIT: is this correct
				//attachInstructionText(endMarker, response.route_conns[i].first_stop.name);
				      							      							
				google.maps.event.addListener(endMarker, 'click', function() {
		    		infowindow.setContent(route.end_address); 
					infowindow.open(map, endMarker);
				});
				
				gmarkers[route.end_location.toString()] = endMarker;
				toStopNodes[pane.id].endMarker = endMarker;
				        														
				var dirStepsBlock = "<div jstcache=\"0\"><table class=\"adp-directions\" jstcache=\"0\"><tbody jstcache=\"0\">";        						
				for (var c = 0; c < route.steps.length; c++)
				{
					dirStepsBlock += routeResponse.dir_step_block.replace("$step", c + 1).replace("$instructions", route.steps[c].instructions).replace("$distance", route.steps[c].distance.text);
				}
				dirStepsBlock += "</tbody></table></div>";

				// HACK: make sure dojo is served from a local repo, otherwise the name of TitlePane div can be relied on should
				// it change in an upcoming version          						      							
				var dirToStopPanel = document.getElementById(pane.containerNode.id);		      				
				dirToStopPanel.innerHTML = "<div jstcache=\"0\">" + routeResponse.warning_dir + routeResponse.start_addr_dir.replace("$address", route.start_address).replace("$location", route.start_location.toString()).replace("$icon", "blackA.png")  + routeResponse.dir_summary_block.replace("$distance", route.distance.text).replace("$duration", route.duration.text) + dirStepsBlock + routeResponse.end_addr_dir.replace("$address", route.end_address).replace("$location", route.end_location.toString()).replace("$icon", routeResponse.route_conns[i].routes[0].icon) + "</div>";      							
			}
			else {
				alert("Could not get direction to stop!");
			}
		});
	}


	function renderFromStopPane(pane, i)
	{
		var num_routes = routeResponse.route_conns[i].routes.length;
		
		// direction from stop
										
		var request = {
			origin:new google.maps.LatLng(routeResponse.route_conns[i].last_stop.lat, routeResponse.route_conns[i].last_stop.lng), 
			destination:new google.maps.LatLng(loc_b.lat, loc_b.lng),
			travelMode: google.maps.DirectionsTravelMode.WALKING
		};
	
    	var fromStopDirRend = new google.maps.DirectionsRenderer({suppressMarkers: true, 
    				polylineOptions: {strokeColor:"#008000", strokeOpacity: 0.7, strokeWeight:"8"}});
    				
    	fromStopNodes[pane.id].dirRenderer = fromStopDirRend; 
    										 	                					                					                	 	                	               
		directionsService.route(request, function(directionResult, status) {
			if (status == google.maps.DirectionsStatus.OK) 
			{         							           							   		      							      											        						
				fromStopDirRend.setMap(map);        						
				fromStopDirRend.setDirections(directionResult);
				
				var route = directionResult.routes[0].legs[0];        						            							      										
				      							
				var startMarker = new google.maps.Marker({
					position: route.start_location,
					map: map,
					icon: 'media/images/' + routeResponse.route_conns[i].routes[num_routes - 1].icon   							
				});
								      							      					      							      							      							      							      							      															
				google.maps.event.addListener(startMarker, 'click', function() {					
					infowindow.setContent(route.start_address); 
					infowindow.open(map, startMarker);					
				});
				
				gmarkers[route.start_location.toString()] = startMarker;
				fromStopNodes[pane.id].startMarker = startMarker;
				      							
				var endMarker = new google.maps.Marker({
					position: route.end_location,
					map: map,
					icon: 'media/images/blackB.png'							
				});
				      							      							      							      							
				// REVISIT: is this correct
				//attachInstructionText(endMarker, response.route_conns[i].first_stop.name);
				      							      							
				google.maps.event.addListener(endMarker, 'click', function() {
		    		infowindow.setContent(route.end_address); 
					infowindow.open(map, endMarker);
				});
				
				gmarkers[route.end_location.toString()] = endMarker;
				fromStopNodes[pane.id].endMarker = endMarker;
				        														
				var dirStepsBlock = "<div jstcache=\"0\"><table class=\"adp-directions\" jstcache=\"0\"><tbody jstcache=\"0\">";        						
				for (var c = 0; c < route.steps.length; c++)
				{
					dirStepsBlock += routeResponse.dir_step_block.replace("$step", c + 1).replace("$instructions", route.steps[c].instructions).replace("$distance", route.steps[c].distance.text);
				}
				dirStepsBlock += "</tbody></table></div>";

				var dirToStopPanel = document.getElementById(pane.containerNode.id);		      				
				dirToStopPanel.innerHTML = "<div jstcache=\"0\">" + routeResponse.warning_dir + routeResponse.start_addr_dir.replace("$address", route.start_address).replace("$location", route.start_location.toString()).replace("$icon", routeResponse.route_conns[i].routes[num_routes - 1].icon)  + routeResponse.dir_summary_block.replace("$distance", route.distance.text).replace("$duration", route.duration.text) + dirStepsBlock + routeResponse.end_addr_dir.replace("$address", route.end_address).replace("$location", route.end_location.toString()).replace("$icon", "blackB.png") + "</div>";				      							
			}
			else {
				alert("could not get direction from stop!");
			}
		});
	}
	
	
	function renderRoutesPane(containerNode, pane, i)
	{
		var num_routes = routeResponse.route_conns[i].routes.length;
		
		for (var k = 0; k < num_routes; k++)
		{
			var routeColor = routeResponse.route_conns[i].routes[k].color;
			var route_num_stops = routeResponse.route_conns[i].routes[k].stops.length;
			
			var routePath = new google.maps.Polyline({
						map: map,
						strokeColor: routeColor,
						strokeOpacity: 0.7,
						strokeWeight: 5
			});  		   					
	
			routesNodes[pane.id].routes.push({start: null, end: null, path: routePath, waypts: [], dirRenderers: [], stopsPane: null});
																				
			if	(route_num_stops > 0) 
			{ 
	            var mapRef = null;
	            if (k > 0 && k < num_routes - 1)
	            {
	               mapRef = map;
	            }
	            
				// first stop marker 
				var firstStop = new google.maps.Marker({ position: new google.maps.LatLng(routeResponse.route_conns[i].routes[k].stops[0].lat, 
					routeResponse.route_conns[i].routes[k].stops[0].lng), map: mapRef, icon: 'media/images/' + routeResponse.route_conns[i].routes[k].icon});
	
				// last stop marker
	   			var lastStop = new google.maps.Marker({ position: new google.maps.LatLng(routeResponse.route_conns[i].routes[k].stops[route_num_stops - 1].lat, 
	   				routeResponse.route_conns[i].routes[k].stops[route_num_stops - 1].lng), map: mapRef, icon: 'media/images/' + routeResponse.route_conns[i].routes[k].icon});
	
				routesNodes[pane.id].routes[k].start = firstStop;
				routesNodes[pane.id].routes[k].end = lastStop;
									  						    					
		    	var route_waypts = [];
		    	var routePoints = []		    		    						    						
		    	for (var l = 0; l < route_num_stops; l++)		    	 
		    	{									
		    		var waypt = new google.maps.Marker({ position: new google.maps.LatLng(routeResponse.route_conns[i].routes[k].stops[l].lat, 
		    			routeResponse.route_conns[i].routes[k].stops[l].lng), map: null, icon: 'media/images/' + routeResponse.route_conns[i].routes[k].icon});
		    								    								
		    		routesNodes[pane.id].routes[k].waypts.push(waypt);
		    		
		    		routePoints.push({Lat:routeResponse.route_conns[i].routes[k].stops[l].lat, 
		    						  Lon:routeResponse.route_conns[i].routes[k].stops[l].lng,
		    						  icon: 'media/images/' + routeResponse.route_conns[i].routes[k].icon});
		    	}
		    						    								    	
		    	parseRoute(routePath, routePoints, 0, []);
		    	    			    			
				if (route_num_stops > 2)
				{
    				var routeStopsPane = new dijit.TitlePane({
                		title: routeResponse.route_conns[i].routes[k].summary,
                		content: routeResponse.route_conns[i].routes[k].stops_pane,
                		onClick: function() 
                		{
                			if (this.open)
                			{
                				for (var c = 0; c < routeStops[this.id].length; c++)
                				{
                					routeStops[this.id][c].setMap(map);
                				}
                			}
                			else 
                			{
                				for (var c = 0; c < routeStops[this.id].length; c++)
                				{
                					routeStops[this.id][c].setMap(null);
                				}                			
                			}
                		},
                		open: false}, routeResponse.route_conns[i].routes[k].stops_div);
                		
                	routeStops[routeStopsPane.id] = routesNodes[pane.id].routes[k].waypts;
                	routesNodes[pane.id].routes[k].stopsPane = routeStopsPane;                	
                }	                    		                    		
                    		
			} // route_num_stops
                    	
			// walking direction
		    
		    if (routeResponse.route_conns[i].routes[k].walking_route)
        	{
        		var walkingRoutePane = new dijit.TitlePane({
        			title: routeResponse.route_conns[i].routes[k].direction,
        			content: "",
        			onClick: function() { alert("[onclick] in walking route pane");}
        			}, routeResponse.route_conns[i].routes[k].stops_div);
        			        		        
        		var prev_route_num_stops = routeResponse.route_conns[i].routes[k - 1].stops.length;
        			
				var request = {
					origin:new google.maps.LatLng(routeResponse.route_conns[i].routes[k - 1].stops[prev_route_num_stops - 1].lat, 
					                              routeResponse.route_conns[i].routes[k - 1].stops[prev_route_num_stops - 1].lng), 
					destination:new google.maps.LatLng(routeResponse.route_conns[i].routes[k + 1].stops[0].lat, 
					                                   routeResponse.route_conns[i].routes[k + 1].stops[0].lng),
					travelMode: google.maps.DirectionsTravelMode.WALKING
				};
				
				var first_stop_icon = routeResponse.route_conns[i].routes[k - 1].icon;
				var last_stop_icon = routeResponse.route_conns[i].routes[k + 1].icon;
    	
    			var routeColor = routeResponse.route_conns[i].routes[k].color;	                			
    			
    			// TODO: remove and replace by corresponding containerNode.id
    			//var walkingDiv = routeResponse.route_conns[i].routes[k].stops_div + "_pane";
    			
    			var dirRend = new google.maps.DirectionsRenderer({suppressMarkers: true}, 
    				{polylineOptions: {strokeColor:"#008000", strokeOpacity: 0.9, strokeWeight:"8"}});
    				
				routesNodes[pane.id].routes[k].dirRenderers.push(dirRend);	                						
    			
				directionsService.route(request, function(directionsResult, status) {
					if (status == google.maps.DirectionsStatus.OK) 
					{   	        								        							
						dirRend.setMap(map);        								        								        							
						dirRend.setDirections(directionsResult);
						
						var route = directionsResult.routes[0].legs[0];
						
						var dirStepsBlock = "<div jstcache=\"0\"><table class=\"adp-directions\" jstcache=\"0\"><tbody jstcache=\"0\">";        						
						for (var c = 0; c < route.steps.length; c++)
						{
							dirStepsBlock += routeResponse.dir_step_block.replace("$step", c + 1).replace("$instructions", route.steps[c].instructions).replace("$distance", route.steps[c].distance.text);
						}
						dirStepsBlock += "</tbody></table></div>";
						
						
						var dirToStopPanel = document.getElementById(walkingRoutePane.containerNode.id);      				
						dirToStopPanel.innerHTML = "<div jstcache=\"0\">" + routeResponse.warning_dir + routeResponse.start_addr_dir.replace("$address", route.start_address).replace("$location", route.start_location.toString()).replace("$icon", first_stop_icon)  + routeResponse.dir_summary_block.replace("$distance", route.distance.text).replace("$duration", route.duration.text) + dirStepsBlock + routeResponse.end_addr_dir.replace("$address", route.end_address).replace("$location", route.end_location.toString()).replace("$icon", last_stop_icon) + "</div>";
							        							
					}
				});

				// first stop marker
				var firstStop = new google.maps.Marker({ position: new google.maps.LatLng(routeResponse.route_conns[i].routes[k - 1].stops[prev_route_num_stops - 1].lat, 
					routeResponse.route_conns[i].routes[k - 1].stops[prev_route_num_stops - 1].lng), map: map, icon: 'media/images/' + first_stop_icon});

				// last stop marker
				var lastStop = new google.maps.Marker({ position: new google.maps.LatLng(routeResponse.route_conns[i].routes[k + 1].stops[0].lat, 
					routeResponse.route_conns[i].routes[k + 1].stops[0].lng), map: map, icon: 'media/images/' + last_stop_icon});
        		
        		routesNodes[pane.id].routes[k].start = firstStop;
				routesNodes[pane.id].routes[k].end = lastStop;
					                    				                  
        	}	// walking route
        	        	                	
		}	// for num_routes
	}
      
	  function initialize() {	  
      	  directionsDisplay = new google.maps.DirectionsRenderer();
    	  var nam_snp_ba = new google.maps.LatLng(48.1453, 17.1114);
    	  var myOptions = {
              zoom:7,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
      		  center: nam_snp_ba
    		}
    	  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    	  //directionsDisplay.setMap(map);
    	  
    	  // Instantiate an info window to hold step text.
  		  stepDisplay = new google.maps.InfoWindow();
  		  
  		  mypath = new google.maps.Polyline({
			map: map,
			strokeColor: "#FF0000",
			strokeOpacity: 1.0,
			strokeWeight: 5
			});  		      	                 	            	      	             	      	
      }
      
      
      function attachInstructionText(marker, text) {
  		google.maps.event.addListener(marker, 'click', function() {
    		stepDisplay.setContent(text);
    		stepDisplay.open(map, marker);
  		});
	  }
	  
	  function onMarkerClick(location) {
	  	google.maps.event.trigger(gmarkers[location],"click");	  		
	  }
      
      
	function onSubmit()
    {
       	connContainer.destroyDescendants(true);
       	
       	if (curConnNodeIdx != -1)
       	{
        	clearMap(curConnNodeIdx);
        }
     	
     	// TODO: display an jax banner  	
     
        dojo.xhrGet(
        {
        	url: "/elvira/find_route",
            content: {"a": document.getElementById("a").value,
                      "b": document.getElementById("b").value},                          
            handleAs: "json-comment-optional",
            load: function(response) 
            {            	
               	loc_a = response.loc_a;
               	loc_b = response.loc_b;    				    				    				
            	routeResponse = response;
            	
            	if (response.route_conns.length > 0)
            	{
					for (i in response.route_conns)
	                {
	                	var connPane = new dijit.layout.ContentPane({
	                    	title: response.route_conns[i].title 
	                	});                		
	                	connContainer.addChild(connPane);                	
					}
					
					if (connContainer.hasChildren())
					{					
						curConnNode = connContainer.getChildren()[0].domNode;
						curConnNodeIdx = 0;
						showContent(curConnNode, curConnNodeIdx);
					}
				}
				else
				{
					// TODO: handle with a message
					alert("No route to destination!");
				}	
			},
            error: function(err) 
            {
            	// TODO: use an error handler to inform user
                // test on cases like timeout, etc. 
                console.debug("got an error:" + err);
            },
            timeout: 60000
        });     			
	}        
      
    
      function onSubmit__()
      {
        dojo.xhrGet(
        {
                url: "/elvira/find_route",
                content: {"a": document.getElementById("a").value,
                          "b": document.getElementById("b").value},                          
                handleAs: "json-comment-optional",
                load: function(response) 
                {
                	
                
                	var loc_a = response.loc_a;
                	var loc_b = response.loc_b;    				    				    				
    					
                	for (i in response.route_conns)
                	{
                		var connPane = new dijit.layout.ContentPane({
                    		title: response.route_conns[i].title, 
                    		content: "Hladam cestu..."
                		});
                		
                		connContainer.addChild(connPane);
                		
                		continue;
                		
                		// TODO: refactor the below                		                	
                		
                		var isPaneOpen = true;
                		var mapRef = map;
                		
	                	if (i == 0)
	                	{	                			                	                		                		
	                		var firstStopPane = new dijit.TitlePane({
	                    		title: "Cesta k zástavke",
	                    		content: "Hľadám cestu...",
	                    		open: isPaneOpen,
	                    		onClick: function() 
	                    		{
									if (this.open)
									{
										// show direction
										if (directionsRenderers.length >= i + 1) 
										{
											directionsRenderers[i].toStop.setMap(map);
											gmarkers[i].toStop.start.setMap(map);
											gmarkers[i].toStop.end.setMap(map);										
										}	
										isToStopPanelOpen = true;							
									}
									else
									{																		 
										// hide direction									
										if (directionsRenderers.length >= i + 1) 
										{
											directionsRenderers[i].toStop.setMap(null);
											gmarkers[i].toStop.start.setMap(null);
											gmarkers[i].toStop.end.setMap(null);																				
										}						
										isToStopPanelOpen = false;			
									}
	                    		}
	                		});
	                		
	                		//dojo.connect(firstStopPane, "onClick", function() {alert ("firstStopPane clicked");});
	               
	                        var routePane = new dijit.TitlePane({
	                    		title: "Cesta MHD",
	                    		content: response.route_conns[i].body,
	                    		open: isPaneOpen,
	                    		onClick: function()
	                    		{
	                    			if (this.open)
	                    			{
	                    				if (directionsRenderers.length >= i + 1)
	                    				{
	                    					if (!isToStopPanelOpen)
	                    					{
	                   							gmarkers[i].toStop.end.setMap(map);
	                   						}
	                   						if (!isFromStopPanelOpen)
	                   						{	
												gmarkers[i].fromStop.start.setMap(map);
											}
											
											for (var ii = 0; ii < directionsRenderers[i].routes.length; ii++)
											{
												directionsRenderers[i].routes[ii].setMap(map);
											}
	                    				}                    				
	                    			}
	                    			else
	                    			{
	                    				if (directionsRenderers.length >= i + 1)
	                    				{
	                    					if (!isToStopPanelOpen)
	                    					{
	                   							gmarkers[i].toStop.end.setMap(null);
	                   						}
	                   						if (!isFromStopPanelOpen)
	                   						{                   							
												gmarkers[i].fromStop.start.setMap(null);
											}
											for (var ii = 0; ii < directionsRenderers[i].routes.length; ii++)
											{
												directionsRenderers[i].routes[ii].setMap(null);
											}
											
	                    				}                    				
	                    			}
	                    		} 
	                    	}); 
	                 
	                        var lastStopPane = new dijit.TitlePane({
	                    		title: "Cesta od zastávky",
	                    		content: "Hľadám cestu...",
								open: isPaneOpen,                    		
	                    		onClick: function() 
	                    		{
									if (this.open)
									{
										// show direction
										if (directionsRenderers.length >= i + 1) 
										{
											directionsRenderers[i].fromStop.setMap(map);
											gmarkers[i].fromStop.start.setMap(map);
											gmarkers[i].fromStop.end.setMap(map);										
										}								
									}
									else
									{																		 
										// hide direction									
										if (directionsRenderers.length >= i + 1) 
										{
											directionsRenderers[i].fromStop.setMap(null);
											gmarkers[i].fromStop.start.setMap(null);										
											gmarkers[i].fromStop.end.setMap(null);
										}									
									}
	                    		}
	                    		
	                		}); 
	
	                		connPane.domNode.appendChild(firstStopPane.domNode);
	                		connPane.domNode.appendChild(routePane.domNode);
	                		connPane.domNode.appendChild(lastStopPane.domNode);                		 
	                	
							connContainer.addChild(connPane);
							
							break;
													
							gmarkers.push({toStop: {start: null, end: null}, 
							               routes:[], 
							               fromStop: {start:null, end: null}
							             });
							
													
							var num_routes = response.route_conns[i].routes.length;
													
							// direction to stop
							
							var request = {
	    	    				origin:new google.maps.LatLng(loc_a.lat, loc_a.lng), 
	        					destination:new google.maps.LatLng(response.route_conns[i].first_stop.lat, response.route_conns[i].first_stop.lng),
	        					travelMode: google.maps.DirectionsTravelMode.WALKING
	    					};
	                	
		                	var toStopDirRend = new google.maps.DirectionsRenderer({suppressMarkers: true, 
		                				polylineOptions: {strokeColor:"#008000", strokeOpacity: 0.9, strokeWeight:"8"}});
		                										 	                					                					                	 	                	               
							directionsService.route(request, function(directionResult, status) {
	      						if (status == google.maps.DirectionsStatus.OK) 
	      						{         							           							   		      							      											        						
	        						toStopDirRend.setMap(map);        						
	        						toStopDirRend.setDirections(directionResult);
	        						
	        						var route = directionResult.routes[0].legs[0];        						            							      										
	      							      							
	      							var startMarker = new google.maps.Marker({
	        							position: route.start_location,
	        							map: mapRef,
	        							icon: 'media/images/blackA.png'   							
	      							});
	      							      							      					      							      							      							      							      							      							
	      							//gmarkers[route.start_location.toString()] = marker;
	      							
	      							google.maps.event.addListener(startMarker, 'click', function() {
	      								// TODO: fix below
	      								alert("startMarker clicked");
	      								
	 							    	//	infowindow.setContent(route.start_address); 
	        							//	infowindow.open(map,marker);
	        							
	        						});
	        						
	      							      							
	      							var endMarker = new google.maps.Marker({
	        							position: route.end_location,
	        							map: mapRef,
	        							icon: 'media/images/' + response.route_conns[i].routes[0].icon							
	      							});
	      							      							      							      							      							
	      							// REVISIT: is this correct
	      							//attachInstructionText(endMarker, response.route_conns[i].first_stop.name);
	      							      							      							
	
	      							google.maps.event.addListener(endMarker, 'click', function() {
	      								// TODO: fix below
	      								alert("endMarker clicked");
	 							    	/*
	 							    		infowindow.setContent(route.end_address); 
	        								infowindow.open(map,marker);
	        							*/
	        						});
	        						        						
	        						/*        						
	        						gmarkers[i].toStop.start = startMarker;
	        						gmarkers[i].toStop.end = endMarker;
	        						*/
	        						
	        						var dirStepsBlock = "<div jstcache=\"0\"><table class=\"adp-directions\" jstcache=\"0\"><tbody jstcache=\"0\">";        						
	        						for (var c = 0; c < route.steps.length; c++)
	        						{
	        							dirStepsBlock += response.dir_step_block.replace("$step", c + 1).replace("$instructions", route.steps[c].instructions).replace("$distance", route.steps[c].distance.text);
	        						}
	        						dirStepsBlock += "</tbody></table></div>";
	
									// HACK: make sure dojo is served from a local repo, otherwise the name of TitlePane div can be relied on should
									// it change in an upcoming version          						      							
	      							var dirToStopPanel = document.getElementById("dijit_TitlePane_0_pane");		      				
	      							dirToStopPanel.innerHTML = "<div jstcache=\"0\">" + response.warning_dir + response.start_addr_dir.replace("$address", route.start_address).replace("$location", route.start_location.toString()).replace("$icon", "blackA.png")  + response.dir_summary_block.replace("$distance", route.distance.text).replace("$duration", route.duration.text) + dirStepsBlock + response.end_addr_dir.replace("$address", route.end_address).replace("$location", route.end_location.toString()).replace("$icon", response.route_conns[i].routes[0].icon) + "</div>";      							
	      						}
	      						else {
	      							alert("could not get direction to stop!");
	      						}
	    					});
	    					
	  						// direction from stop    					
	    					request = {
	    	    				origin: new google.maps.LatLng(response.route_conns[i].last_stop.lat, response.route_conns[i].last_stop.lng),
	        					destination:new google.maps.LatLng(loc_b.lat, loc_b.lng),
	        					travelMode: google.maps.DirectionsTravelMode.WALKING
	    					};
	                	
	                		fromStopDirRend = new google.maps.DirectionsRenderer({suppressMarkers: true, 
	                										polylineOptions: {strokeColor:"#008000", strokeOpacity: 0.9, strokeWeight:"8"}});
	                										                 											                	
							directionsService.route(request, function(directionsResult, status) {
	      						if (status == google.maps.DirectionsStatus.OK) 
	      						{        						
	        						fromStopDirRend.setMap(map);        						
	        						fromStopDirRend.setDirections(directionsResult);
	        						
	        						var route = directionsResult.routes[0].legs[0];
	        						
	        						var startMarker = new google.maps.Marker({
	        							position: route.start_location,
	        							map: mapRef,
	        							icon: 'media/images/' + response.route_conns[i].routes[num_routes - 1].icon   							
	      							});      							      						
	      							
	      							google.maps.event.addListener(startMarker, 'click', function() {
	      								alert("from stop::startMarker clicked");
	      								// TODO: fix below
	      								/*      								
	 							    	infowindow.setContent(route.start_address); 
	        							infowindow.open(map,marker);
	        							*/
	        						});
	        						        						            							      										
	      							var endMarker = new google.maps.Marker({
	        							position: route.end_location,
	        							map: mapRef,        							
	        							icon: 'media/images/blackB.png'   							
	      							});
	      							
	      							google.maps.event.addListener(endMarker, 'click', function() {
										alert("from stop::endMarker clicked");
	      								// TODO: fix below
	      								/*      		      							
	 							    	infowindow.setContent(route.end_address); 
	        							infowindow.open(map,marker);
	        							*/
	        						});
	        						
	        						/*
	        						gmarkers[i].fromStop.start = startMarker;
	        						gmarkers[i].fromStop.end = endMarker;        						
									*/
	
	        						var dirStepsBlock = "<div jstcache=\"0\"><table class=\"adp-directions\" jstcache=\"0\"><tbody jstcache=\"0\">";        						
	        						for (var c = 0; c < route.steps.length; c++)
	        						{
	        							dirStepsBlock += response.dir_step_block.replace("$step", c + 1).replace("$instructions", route.steps[c].instructions).replace("$distance", route.steps[c].distance.text);
	        						}
	        						dirStepsBlock += "</tbody></table></div>";
	      							
	      							var dirToStopPanel = document.getElementById("dijit_TitlePane_2_pane");      				
	      							dirToStopPanel.innerHTML = "<div jstcache=\"0\">" + response.warning_dir + response.start_addr_dir.replace("$address", route.start_address).replace("$location", route.start_location.toString()).replace("$icon", response.route_conns[i].routes[num_routes - 1].icon)  + response.dir_summary_block.replace("$distance", route.distance.text).replace("$duration", route.duration.text) + dirStepsBlock + response.end_addr_dir.replace("$address", route.end_address).replace("$location", route.end_location.toString()).replace("$icon", "blackB.png") + "</div>";
	      							        						
	      						}
	    					});
	    					
	    					
	    					directionsRenderers.push({toStop: toStopDirRend, fromStop: fromStopDirRend, routes: []});
	    	
							// routes direction
																		
							var stopIcon = new google.maps.MarkerImage();
							
							for (var k = 0; k < num_routes; k++)
							{
								var routeColor = response.route_conns[i].routes[k].color;
								var route_num_stops = response.route_conns[i].routes[k].stops.length;
																				
								if	(route_num_stops > 0) { 
	
									// first stop marker 
	   								var firstStop = new google.maps.Marker({ position: new google.maps.LatLng(response.route_conns[i].routes[k].stops[0].lat, 
	   									response.route_conns[i].routes[k].stops[0].lng), map: null, icon: 'media/images/' + response.route_conns[i].routes[k].icon});
	
									// last stop marker
	   								var lastStop = new google.maps.Marker({ position: new google.maps.LatLng(response.route_conns[i].routes[k].stops[route_num_stops - 1].lat, 
	   									response.route_conns[i].routes[k].stops[route_num_stops - 1].lng), map: null, icon: 'media/images/' + response.route_conns[i].routes[k].icon});
	
									gmarkers[i].routes.push({start: firstStop, end: lastStop, waypts: []}); 
									  						    					
		    						var route_waypts = [];	    						    						
		    						for (var l = 1; l < route_num_stops - 1; l++) 
		    						{									
		    							var waypt = new google.maps.Marker({ position: new google.maps.LatLng(response.route_conns[i].routes[k].stops[l].lat, 
		    								response.route_conns[i].routes[k].stops[l].lng), map: null, icon: 'media/images/' + response.route_conns[i].routes[k].icon});
		    							
		    							route_waypts.push({location:new google.maps.LatLng(response.route_conns[i].routes[k].stops[l].lat, 
		    								response.route_conns[i].routes[k].stops[l].lng), stopover:true});
		    								    								
		    							gmarkers[i].routes[k].waypts.push(waypt);
		    						}
		    						    						
		    						var m = 0;
		    						var max_waypts = 8;
		    						var orig = null;
		    						var dest = null;
		    						      											                				      							 	    												
		    						while (m < route_num_stops - 1)
		    						{
		    							var subroute_waypts = [];
		    							
		    							orig = new google.maps.LatLng(response.route_conns[i].routes[k].stops[m].lat, 
			    	    					                              response.route_conns[i].routes[k].stops[m].lng);
	
		    	    					if (m + max_waypts < route_num_stops - 1)
		    	    					{                               
	        								dest = new google.maps.LatLng(response.route_conns[i].routes[k].stops[m + max_waypts + 1].lat, 
		        						                                  response.route_conns[i].routes[k].stops[m + max_waypts + 1].lng);	        						    	        						    	        						                                  		
		        						}
		        						else
		        						{
	        								dest = new google.maps.LatLng(response.route_conns[i].routes[k].stops[route_num_stops - 1].lat, 
		        						                                  response.route_conns[i].routes[k].stops[route_num_stops - 1].lng);
		        						}
		        						
		        						subroute_waypts = route_waypts.slice(m, m + max_waypts);
		        						m += max_waypts + 1;	        						    						
	
	    								request = {
		    	    						origin:orig, 
		        							destination:dest,
		        							waypoints: subroute_waypts,	        								        							
		        							travelMode: google.maps.DirectionsTravelMode.DRIVING
		    							};
		    							
		    							var routeDirRend = new google.maps.DirectionsRenderer({suppressMarkers: true});
		    							
		    							directionsRenderers[i].routes.push(routeDirRend);
											                			                			
										directionsService.route(request, function(response, status) {
			      							if (status == google.maps.DirectionsStatus.OK) 
			      							{   		      					      												                    					                    					                 			                    						                								      								      									      				      								        									        										 
			        							routeDirRend.setMap(map);        							
			        							routeDirRend.setDirections(response);		        								        						
			      							}
			    						});
			    								    								    					
		    						}
		
									if (route_num_stops > 2)
									{
		    							var routeStopsPane = new dijit.TitlePane({
		                    				title: response.route_conns[i].routes[k].summary,
		                    				content: response.route_conns[i].routes[k].stops_pane,
		                    				open: false}, response.route_conns[i].routes[k].stops_div);
		                    		}	                    			                    		
		                    		
		                    	}
		                    	
		                    	// walking direction
		                    	if (response.route_conns[i].routes[k].walking_route)
		                    	{
		                    		var walkingRoutePane = new dijit.TitlePane({
		                    			title: response.route_conns[i].routes[k].direction,
		                    			content: ""}, response.route_conns[i].routes[k].stops_div);
		                    			
		                    		var prev_route_num_stops = response.route_conns[i].routes[k - 1].stops.length;
		                    			
									var request = {
		    	    					origin:new google.maps.LatLng(response.route_conns[i].routes[k - 1].stops[prev_route_num_stops - 1].lat, 
		    	    					                              response.route_conns[i].routes[k - 1].stops[prev_route_num_stops - 1].lng), 
		        						destination:new google.maps.LatLng(response.route_conns[i].routes[k + 1].stops[0].lat, 
		        						                                   response.route_conns[i].routes[k + 1].stops[0].lng),
		        						travelMode: google.maps.DirectionsTravelMode.WALKING
		    						};
		    						
		    						var first_stop_icon = response.route_conns[i].routes[k - 1].icon;
		    						var last_stop_icon = response.route_conns[i].routes[k + 1].icon;
		                	
		                			var routeColor = response.route_conns[i].routes[k].color;	                			
		                			var walkingDiv = response.route_conns[i].routes[k].stops_div + "_pane";
		                			
		                			var dirRend = new google.maps.DirectionsRenderer({suppressMarkers: true}, 
		                				{polylineOptions: {strokeColor:"#008000", strokeOpacity: 0.9, strokeWeight:"8"}});
		                				
									directionsRenderers[i].routes.push(routeDirRend);	                						
		                			
									directionsService.route(request, function(directionsResult, status) {
		      							if (status == google.maps.DirectionsStatus.OK) 
		      							{   	        								        							
		        							dirRend.setMap(map);        								        								        							
		        							dirRend.setDirections(directionsResult);
		        							
		        							var route = directionsResult.routes[0].legs[0];
		        							
			        						var dirStepsBlock = "<div jstcache=\"0\"><table class=\"adp-directions\" jstcache=\"0\"><tbody jstcache=\"0\">";        						
			        						for (var c = 0; c < route.steps.length; c++)
			        						{
			        							dirStepsBlock += response.dir_step_block.replace("$step", c + 1).replace("$instructions", route.steps[c].instructions).replace("$distance", route.steps[c].distance.text);
			        						}
			        						dirStepsBlock += "</tbody></table></div>";
			      							
			      							var dirToStopPanel = document.getElementById(walkingDiv);      				
			      							dirToStopPanel.innerHTML = "<div jstcache=\"0\">" + response.warning_dir + response.start_addr_dir.replace("$address", route.start_address).replace("$location", route.start_location.toString()).replace("$icon", first_stop_icon)  + response.dir_summary_block.replace("$distance", route.distance.text).replace("$duration", route.duration.text) + dirStepsBlock + response.end_addr_dir.replace("$address", route.end_address).replace("$location", route.end_location.toString()).replace("$icon", last_stop_icon) + "</div>";
		        								        							
		      							}
		    						});
	
									// first stop marker
	   								new google.maps.Marker({ position: new google.maps.LatLng(response.route_conns[i].routes[k - 1].stops[prev_route_num_stops - 1].lat, 
	   									response.route_conns[i].routes[k - 1].stops[prev_route_num_stops - 1].lng), map: map, icon: 'media/images/' + first_stop_icon});
	
									// last stop marker
	   								new google.maps.Marker({ position: new google.maps.LatLng(response.route_conns[i].routes[k + 1].stops[0].lat, 
	   									response.route_conns[i].routes[k + 1].stops[0].lng), map: map, icon: 'media/images/' + last_stop_icon});
		                    			                    				                  
		                    	}
		                    	
	    					}
	    				        				      				    			
	    					//break;
						}    
						else 
						{
							connContainer.addChild(connPane);
						}					    					
    					              		
                	}
    				              		                          
		        },
                error: function(err) 
                {
                        // TODO: use an error handler to inform user
                        // test on cases like timeout, etc. 
                        console.debug("got an error:" + err);
                },
                timeout: 60000
        });     
      }
      
	function parseRoute(routePath, routes, end, wypts) {
	    var marker = new google.maps.Marker({
	            position: new google.maps.LatLng(routes[end].Lat, routes[end].Lon),
	            title: (end+1)+" "+routes[end].Name,
	            map: null,
	            icon: routes[end].Icon
	    });
	
	    if ((wypts.length < 10) && (end < routes.length -1)) {
	        wypts.push({location : new google.maps.LatLng(routes[end].Lat, routes[end].Lon), stopover : false});
	        parseRoute(routePath, routes, end+1, wypts);
	    } else {
	        if (end == routes.length -1) wypts.push({location : new google.maps.LatLng(routes[end].Lat, routes[end].Lon), stopover : false});
	            //var orgn = new google.maps.LatLng(routes[end].Lat, routes[end].Lon);
	            //var dstn = new google.maps.LatLng(routes[end+1].Lat, routes[end+1].Lon);
	
	        orgn = wypts.shift().location;
	        dstn = wypts.pop().location;
	
	        var request = {
	            origin: orgn,
	            destination: dstn,
	            waypoints : wypts,
	            travelMode: google.maps.DirectionsTravelMode.DRIVING
	        };
	
	        directionsService.route(request, function(response, status) {
	            if (status == google.maps.DirectionsStatus.OK) {
	                /*
	                don't know why directionsDisplay.setDirections(response); will not work.
	                Using the raw data to draw the line
	                */
	                //directionsDisplay.setDirections(response);
	                var rs = response.routes;
	
	                for(var r in rs){
	                    /*var legs = rs[r].legs.push(new google.maps.Polyline({
	                    path: rs[r].overview_path,
	                    map: map,
	                    strokeColor: "#8C88BF",
	                    strokeOpacity: 0.75,
	                    strokeWeight: 5}));*/
	
	                    var opath = rs[r].overview_path;
	                    for(var ro in opath){
	                        var path = routePath.getPath();
	                        path.push(opath[ro]);
	                    }
	                }
	            }
	        });
	        if (end < routes.length -1)
	            parseRoute(routePath, routes, end, [{location : dstn, stopover : false}]);
	    }
	}	      
      
      
/*      
      function setMarker(directionsRenderer, markerIcon, routeColor)
      {
			directionsRenderer.setOptions({markerOptions: {icon: markerIcon},
		        								polylineOptions: {strokeColor:routeColor}});
      }
*/      
    </script>

	<style type="text/css">
	
	
	.div1 {
	
	background-color:; background-image:url(""); background-repeat:repeat; background-position:center center;  color:;
	
	border:1px solid; border-color:;
	
	width:465px; height:100px; overflow:auto;
	
	position:absolute; z-index:2; left:50%; top:0%;
	
	margin-left:-620px; margin-top:10px; text-align:center;
	
	visibility:visible;}
	
	.div2 {
	
	background-color:;background-image:url(""); background-repeat:repeat; background-position:center center;  color:;
	
	border:1px solid; border-color:;
	
	width:465px; height:600px; overflow:auto;
	
	position:absolute; z-index:2; left:50%; top:0%;
	
	margin-left:-620px; margin-top:150px; text-align:center;
	
	visibility:visible;}
		
	.div3 {
	
	background-color:;background-image:url(""); background-repeat:repeat; background-position:center center;  color:;
	
	border:0px solid; border-color:;
	
	width:800px; height:800px; overflow:auto;
	
	position:absolute; z-index:2; left:50%; top:0%;
	
	margin-left:-150px; margin-top:10px; text-align:center;
	
	visibility:visible;}
	
	
	</style>



  </head>
  <body class=" claro " onload="initialize()">
  
  
  <div class="cmlContainer">

	<div id="div1" class="div1">

	  <form method="get" onsubmit="onSubmit();return false;">
     	<table border="0" align="left">    
       		<tr>
         		<td><b>A:</b></td>
         		<td><input type="text" name="a" size="30" value="pri krizi" id="a"></td>
         		<td><b>B:</b></td>
         		<td><input type="text" name="b" size="30" value="peknikova" id="b"></td>
       		</tr>                   
      	</table>
            
      	<p align="center"><input type="submit" value="Hladaj" id="searchButton"></p>                
   	  </form>

	</div>

	<div id="markup" class="div2">
	</div>

	<div id="map_canvas" class="div3">
	</div>
  </div>  
      
 </body>
 </html>
